<template>
	<div class="detail">
		<div class="detail_title">
			<van-icon name="arrow-left" size="20px" style="margin-left: 10px;" @click="back" />
			<p>商品详细</p>
		</div>
		<div class="detail_title_zhan">

		</div>
		<div class="carousel">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="item in goodsDetail.mainPictures"><img :src="item" alt="" /></van-swipe-item>
			</van-swipe>
		</div>

		<div class="goods_price">
			<p>￥{{goodsDetail.price}}</p>
		</div>
		<!-- 描述 -->
		<div class="goods_desc">
			<div class="goods_name">
				<p>{{goodsDetail.name}}</p>

			</div>
			<div class="goods_select">
				<div class="select_goods_size">
					<span>选择</span>
					<p @click="select_goods">{{select_default_text||'请选择商品规格'}}</p>
				</div>
				<div class="select_goods_address">
					<span>送至</span>
					<p @click="show_address_popup">{{choosed_address}}</p>
					<div>
						<van-popup v-model="address_popup_show" position="bottom"
							:style="{ height: '50%' }"><van-address-list v-model="chosenAddressId" :list="list"
								default-tag-text="默认" @add="onAdd" @edit="onEdit" @select="select_address"/></van-popup>
					</div>
				</div>
				<div class="select_goods_service">
					<span>服务</span>
					<p>无忧退 快速退款 免费包邮</p>
				</div>
			</div>
		</div>
		<!-- 详细 -->
		<div class="goods_detail">
			<div class="goods_detail_title">
				<p>详细</p>
			</div>
			<div class="goods_detail_box">
				<div class="goods_detail_item" v-for="item in goodsDetail.details.properties">
					<span>{{item.name}}</span>
					<p>{{item.value}}</p>
				</div>
			</div>
		</div>

		<!-- sku组件 -->

		<geek-sku v-model="skuShow" :data="skus" :themeColor="theme_color"
			:defaultCover="this.select_sku.picture||goodsDetail.mainPictures[0]" :btnConfirmText="btn_text"
			notSelectSku="请选择完整的商品信息" :isSelectMinPriceSku="false" @skuChange="skuChange" @confirm="skuConfirm">
		</geek-sku>



		<!-- 介绍图 -->
		<div class="introductory_diagram">
			<div class="detail_img" v-for="item in goodsDetail.details.pictures">
				<img :src="item" alt="" />
			</div>
		</div>
		<!-- 相关推荐 -->
		<div class="about_recommend">
			<div class="about_recommend_title">
				<p>同类推荐</p>
			</div>
			<div class="about_recommend_box">

				<div class="about_recommend_items">

					<div class="about_recommend_item" v-for="item in goodsDetail.similarProducts" :key="item.id"
						@click="gotoDetail(item.id)">
						<div class="about_recommend_item_img">
							<img :src="item.picture" alt="" />
						</div>

						<div class="about_recommend_item_text">
							<span class="about_recommend_item_text_title">{{item.name}}</span>
							<span class="about_recommend_item_text_price">{{item.price}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 占位 -->
		<div class="none">

		</div>
		<!-- 支付相关 -->
		<div class="pay_about">
			<van-goods-action>
				<van-goods-action-icon icon="like-o" text="收藏" />
				<van-goods-action-icon icon="service-o" text="客服" info="5" />
				<van-goods-action-icon icon="cart-o" text="购物车" />
				<van-goods-action-button class="into_chart" plain color="#F3AA73" text="加入购物车" type="warning"
					@click="add_cart_show" />
				<van-goods-action-button class="buy_now" color="#5AB79C" text="立即购买" @click="buy_now_show" />
			</van-goods-action>

		</div>
	</div>
</template>

<script>
	import geekSku from "@/components/geek-sku/geek-sku.vue";
	import request from '../../api/request.js'
	export default {
		name: 'detail',
		components: {
			geekSku,
		},
		data() {
			return {
				goodsDetail: {},
				// 是否显示组件
				skuShow: false,
				address_popup_show: false,
				select_default_text: '请选择商品规格',
				// sku列表
				btn_text: '',
				choosed_address:'请选择收货地址',
				theme_color: [],
				skus: [],
				select_sku: {},
				chosenAddressId: '1',
				list: [],

			}
		},
		 mounted() {
			// 获取地址信息
			this.get_address_info()
			
			// 全局事件总线关闭sku弹窗
			this.$bus.$on('closeit', (flag) => {
				this.skuShow = false
			})
			// 获取商品数据
			this.getData()
		},
		beforeDestroy() {
			this.$bus.$off('closeit')
		},
		methods: {
			async getData() {
				let res = await request({
					url: `/goods?id=${this.$route.query.id}`,
					method: 'get',

				})
				this.goodsDetail = res.result

               

				let sku = []
				let specs = {}
				for (var item in res.result.skus) {
					for (var spec in res.result.skus[item].specs) {


						specs[res.result.skus[item].specs[spec].name] = res.result.skus[item].specs[spec].valueName

					}


					let data = {
						id: res.result.skus[item].id,
						price: res.result.skus[item].price,
						stock: res.result.skus[item].inventory,
						picture: res.result.skus[item].picture,
						
						sku_attrs: specs
					}
					sku.push(data)

					specs = {}

				}
				
				this.skus = sku
				

			},

			back() {
				this.$router.back()
				this.getData()
				window.scrollTo(document.documentElement.offsetHeight, 0)

			},
			// 获取地址信息
		async get_address_info(){
				let res = await request({
					url: '/member/address',
					method: 'get',
					headers: {
						Authorization: localStorage.getItem('token')
					}
				})
				this.chosenAddressId = res.result[0].id
				for (var i in res.result) {
					let item = {
						id: res.result[i].id,
						name: res.result[i].receiver,
						tel: res.result[i].contact,
						address: res.result[i].fullLocation
					}
					this.list.push(item)
			  }
			},
			// 选择地址
			select_address(item){
				this.choosed_address=item.address
			},
			// 选择商品
			select_goods() {
				this.skuShow = true,
					this.btn_text = '立即购买'
				this.theme_color = [90, 183, 156]
			},
			// 加入购物车弹窗显示
			add_cart_show() {
				this.skuShow = true,
					this.btn_text = '加入购物车'
				this.theme_color = [243, 170, 115]
			},
	
	        // 立即购买时显示
			buy_now_show() {
				this.skuShow = true,
					this.btn_text = '立即购买'
				this.theme_color = [90, 183, 156]
			},
			// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
			skuChange(sku) {
				this.select_sku = sku

				
				let s = ''
				for (var key in sku.sku_attrs) {
					s += key + ':' + sku.sku_attrs[key] + '   '
				}

				this.select_default_text = s

			},
			// sku确认事件
			skuConfirm(e) {
				this.skuShow = false
				if(this.btn_text==='加入购物车')
				{
					this.$store.dispatch('cartStore/add_cart',e)
				}
				else if(this.btn_text==='立即购买'){
				
				this.$router.push({
					name:'fill_order',
					query:{
						item:JSON.stringify(e),
						addressId:this.chosenAddressId
					}
				})
				}
				
			},
			show_address_popup() {
				this.address_popup_show = true;
			},
			onAdd() {
				this.$router.push({
					name: 'create_address'
				})
			},
			onEdit(item, index) {
				this.$router.push({
					name: 'update_address',
					query: {
						item,
						index
					}
				})
			},
			// 跳转商品详细页面
			gotoDetail(id) {
				this.$router.push({
					name: 'detail',
					query: {
						id
					}
				})
				this.getData()
				window.scrollTo(0, 0)
			}



		}
	}
</script>

<style lang="scss">
	.detail {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;

		// 标题
		.detail_title {
			width: 100%;
			height: 5%;
			position: fixed;
			z-index: 999;
			background-color: #F8F8F8;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			p {
				font-size: 30px;
				padding-left: 10px;
				padding-bottom: 5px;
				letter-spacing: 2px;
			}
		}

		.detail_title_zhan {
			width: 100%;
			height: 5%;
		}

		// 轮播图
		.carousel {
			width: 100%;
			height: 47%;

			display: flex;
			justify-content: center;
			align-items: center;

			.my-swipe {
				width: 100%;
				height: 100%;
				color: #fff;
				font-size: 20px;
				line-height: 100%;
				padding: 0;
				box-sizing: border-box;
				text-align: center;

				img {
					width: 100%;
					height: 100%;
				}

			}
		}

		//价格
		.goods_price {
			width: 100%;
			height: 8%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 50px;
			background-color: #65C5AA;

			p {
				color: white;

				font-size: 50px;
			}
		}

		//描述
		.goods_desc {
			width: 100%;
			height: 24%;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 30px;

			.goods_name {
				width: 100%;
				height: 28%;
				background-color: white;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 30px;
				border-bottom: 1px solid gray;

				p {
					font-size: 30px;
				}
			}

			.goods_select {
				width: 100%;
				height: 72%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				font-size: 28px;

				.select_goods_size {
					width: 100%;
					height: 33%;
					display: flex;

					justify-content: flex-start;
					align-items: center;
					padding-left: 30px;
					border-bottom: 1px solid gray;

					span {
						color: #9B9B9B;
						margin-right: 50px;
					}

					p {
						letter-spacing: 2px;
						font-size: 24px;
					}
				}

				.select_goods_address {
					width: 100%;
					height: 33%;
					display: flex;

					justify-content: flex-start;
					align-items: center;
					padding-left: 30px;
					border-bottom: 1px solid gray;

					span {
						color: #9B9B9B;
						margin-right: 50px;
					}

					p {
						letter-spacing: 2px;
						font-size: 24px;
					}
				}

				.select_goods_service {
					width: 100%;
					height: 33%;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;
					padding-left: 30px;


					span {
						color: #9B9B9B;
						margin-right: 50px;
					}

					p {
						letter-spacing: 2px;
						font-size: 26px;
					}
				}
			}

		}

		//详细
		.goods_detail {
			width: 100%;
			height: auto;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.goods_detail_title {

				width: 100%;
				height: 16%;
				padding-left: 30px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				p {
					font-size: 30px;
					font-weight: 550;
					letter-spacing: 2px;
				}

				p::after {

					content: '';
					width: 3px;
					height: 40px;
					vertical-align: middle;
					left: 20px;
					background-color: #7BA697;
					position: absolute;

				}
			}

			.goods_detail_box {
				width: 100%;
				height: 84%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				.goods_detail_item {
					width: 100%;
					height: auto;
					display: flex;

					justify-content: flex-start;
					align-items: center;
					border-bottom: 1px dashed gray;
					box-sizing: border-box;

					span {
						box-sizing: border-box;
						width: 40%;
						height: 100%;
						line-height: 100%;
						font-size: 24px;
						display: flex;
						padding-left: 50px;
						justify-content: flex-start;
						align-items: center;
					}

					p {
						width: 60%;
						height: 100%;
						line-height: 150%;
						font-size: 24px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
			}


		}

		// 介绍图
		.introductory_diagram {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 50px;

			.detail_img {
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 相关推荐
		.about_recommend {
			width: 100%;
			height: 65%;

			// 同类推荐

			.about_recommend_title {
				width: 100%;
				height: 100px;
				background-color: #FFFFFF;
				padding-left: 30px;
				display: flex;
				box-sizing: border-box;
				justify-content: flex-start;
				align-items: flex-start;

				p {
					font-size: 30px;
					font-weight: 550;
					letter-spacing: 2px;
				}

				p::after {

					content: '';
					width: 3px;
					height: 40px;
					vertical-align: middle;
					left: 20px;
					background-color: #7BA697;
					position: absolute;

				}
			}

			.about_recommend_box {
				box-sizing: border-box;
				padding-top: 20px;
				background-color: #F4F4F4;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				box-sizing: border-box;

				.about_recommend_items {
					width: 100%;
					height: 100%;
					background-color: #F7F7F7;
					margin-bottom: 100px;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					box-sizing: border-box;

					.about_recommend_item {
						background-color: white;
						width: 46%;
						height: 400px;
						border-radius: 10px;
						margin-bottom: 20px;
						margin-left: 20px;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: flex-start;

						.about_recommend_item_img {

							width: 100%;
							height: 70%;

							display: flex;
							justify-content: center;
							align-items: center;

							img {
								width: 80%;
								height: 80%;
							}

						}

						.about_recommend_item_text {
							width: 100%;
							height: 20%;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;

							.about_recommend_item_text_title {
								width: 100%;
								height: 70%;
								font-size: 25px;
								padding: 0px 20px;
								overflow: scroll;

							}

							.about_recommend_item_text_price {

								width: 100%;
								height: 40%;
								font-size: 25px;

								padding-left: 25px;
								color: #985451;
								padding-top: 15px;
							}
						}
					}
				}
			}

		}

		// 占位
		.none {
			width: 100%;
			height: 6%;
		}

		// 支付相关
		.pay_about {
			width: 100%;
			height: 6%;

			position: fixed;
			bottom: 0;

		}
	}
</style>